<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回收站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 300px;
            height: 300px;
            margin: 100px auto;
        }

        .recycle {
            width: 80px;
            height: 80px;
            margin: 30px;
        }

        .recycle img {
            width: 100%;
            height: 100%; 
        }
        .content div{
            width: 48px;
            height: 48px;
            position: relative;
            float: left;
            margin:5px; 
        }
        .content div img{
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="recycle"><img src="images/5c7655ca5448e.png" alt=""></div>
        <div class="content">
            <div><img src="images/basketball.png" alt=""></div>
            <div><img src="images/box.png" alt=""></div>
            <div><img src="images/calculator.png" alt=""></div>
            <div><img src="images/clipboard.png" alt=""></div>
            <div><img src="images/console.png" alt=""></div>
            <div><img src="images/facebook.png" alt=""></div>
            <div><img src="images/gift.png" alt=""></div>
            <div><img src="images/id_card.png" alt=""></div>
            <div><img src="images/imac.png" alt=""></div>
            <div><img src="images/system_monitoring.png" alt=""></div>

        </div>
    </div>

    <script>
        var content = document.querySelector(".content");
        var recycle = document.querySelector(".recycle");
        content.onmousedown = function (e) {
            var e = e || window.event;
            var tag = e.target || e.srcElment;
            e.preventDefault();
            if (tag.nodeName == "IMG") {
               var disX = e.clientX - tag.offsetLeft;
               var disY = e.clientY - tag.offsetTop; 
               document.onmousemove = function(e){
                    var e = e || window.event;
                    var l = e.clientX - disX;
                    var t = e.clientY - disY; 
                    tag.style.left =  l + "px";
                    tag.style.top =  t + "px";
               }
               document.onmouseup = function(e){
                   var e = e || window.event;
                   var obj = recycle.getBoundingClientRect();
                   if(e.clientX > obj.left && e.clientX < obj.right && e.clientY >obj.top && e.clientY < obj.bottom){
                      tag.remove();  
                   } 
                   document.onmousemove = null;
                   document.onmouseup = null;
               }
            }
        }
    </script>
</body>

</html>